<template>
  <h2>{{ count }}</h2>
  <hr />
  <Parent />
</template>

<script>
import { ref, provide, readonly } from 'vue'
import Parent from './Parent.vue'
// Provider/Inject 依赖注入：可以实现跨层级数据传递
export default {
  name: 'App',
  components: {
    Parent,
  },
  setup() {
    const count = ref(8)
    const changeCount = (num) => {
      count.value += num
    }
    // !#1 提供数据，key、value
    provide('count', readonly(count))
    provide('num', 1)
    provide('changeCount', changeCount)
    return {
      count,
    }
  },
}
</script>
